<script setup lang="ts">
import {defineAsyncComponent} from "vue";
import Card from "@/components/Card.vue";

const AsyncComponent = defineAsyncComponent(() =>
    import('../../components/AsyncDemo.vue')
);

// const HelloComponent = defineAsyncComponent({
//   loader: import('../components/Loading.vue'),
//   loadingComponent: import('../components/LoadingComponent.vue'),
//   errorComponent: import('../components/LoadingComponent.vue'),
//   delay: 200,
// })


</script>

<template>
  <card title="基本用法">
    <p>在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent
      方法来实现此功能</p>
    <async-component class="border rounded-3 p-3 shadow">
      这是一个通过异步加载的组件
    </async-component>
  </card>
<!--  <card title="加载与错误状态">-->
<!--    <hello-component class="border rounded-3 p-3 shadow">666</hello-component>-->
<!--  </card>-->

</template>

<style scoped>

</style>